<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none
        }
    </style>
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/Student_Information.css">
    <link rel="stylesheet" href="../fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../util/jquery-3.4.1.js"></script>
    <script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
    <div>
    <header class="header-page">
        <div class="header-text">
            <span>学生信息</span>
        </div>
    </header>
    <div class="content container-fluid">
        <div class="content-header">
            <span class="content-span"><i class="fa fa-list-alt"></i></span>
            <span class="content-span">学生信息表</span>
            <span class="search">
                     <input class="form-control content-input input-search" type="text" placeholder="输入姓名查找">
                     <span class="content-search">
                         <i class="fa fa-search content-search"></i>
                     </span>
                 </span>
            <input class="btn btn-default content-btn btn-add" type="button" value="添加学生">
        </div>
        <form class="form-inline">
            <table class="content-table">
                <tr class="table-tr table-header">
                    <th class="content-th list-th">选择</th>
                    <th class="content-th">序号</th>
                    <th class="content-th">姓名</th>
                    <th class="content-th width-th">班级</th>
                    <th class="content-th width-th">性别</th>
                    <th class="content-th width-th">年龄</th>
                    <th class="content-th width-th">监护人</th>
                    <th class="content-th tel_width">联系方式</th>
                    <th class="content-th tel_person">紧急联系人</th>
                    <th class="content-th tel_width">联系方式</th>
                    <th class="content-th">入学时间</th>
                    <th class="content-th last-th">操作</th>
                    <th  class="content-th time-th">备注</th>
                </tr>
            </table>
        </form>
    </div>
    <footer>
        <div class="footer container-fluid">
            <button type="button" class="btn btn-default ">全选</button>
            <button type="button" class="btn btn-default">反选</button>
            <button type="button" class="btn  btn-default">删除</button>
            <div class="alert alert-warning alert-dismissible">
                <button type="button" class="close">
                    <span>&times;</span>
                </button>
                请选择删除对象
            </div>
            <nav aria-label="Page navigation" class="footer-nav">
                <ul class="pagination nav-ul">

                </ul>
            </nav>   <!--页码-->
        </div>
    </footer>
</div>


    <!-- 多选删除弹框  -->
    <div class="modal fade" id="myModal" tabindex="-1">
        <div class="modal-dialog modal-sm" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span >&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">删除</h4>
                </div>
                <div class="modal-body">
                    确认删除吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger btn-del">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!--单选删除弹框-->
    <div class="modal fade" id="myModal3" tabindex="-1">
        <div class="modal-dialog modal-sm" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span >&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel3">删除</h4>
                </div>
                <div class="modal-body">
                    确认删除吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger btn-del2">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!--添加学生信息弹框-->
    <div class="modal fade" id="myModal2" tabindex="-1">
        <div class="modal-dialog modal-lg" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span >&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">添加学生信息</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="stu_inform">
                        <div class="stu_form">
                            <div class="stu_picture" id="div1">
                                <img src="../images/wwq-img/student-photo.jpg" alt="">
                            </div>
                            <input type="file" id="input-load">
                            <button class="btn" id="btn-load" type="button">上传照片</button>
                        </div>      <!--上传照片-->
                        <div class="stu_form">
                            <div class="form-group">
                                <span>*</span>
                                <label for="name">姓名:</label>
                                <input type="text" id="name"  class="form-control" maxlength="5" data-index="name">
                            </div>
                            <div>
                                <span>*</span>
                                <label>性别:</label>
                                <input type="radio" id="boy" name="sex" checked><label for="boy">男</label>
                                <input type="radio" id="girl" name="sex"><label for="girl">女</label>
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="birth">出生年月:</label>
                                <input type="text" id="birth" class="form-control" data-index="birth" placeholder="请按 2008.08.08 格式填写" maxlength="15">
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="class">班级:</label>
                                <input type="text" id="class" data-index="class" class="form-control" placeholder="请按 17级大班 格式填写" maxlength="10">
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="address">家庭住址:</label>
                                <input type="text" id="address" data-index="address" class="form-control" maxlength="25">
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="time">入学时间:</label>
                                <input type="date" id="time" class="form-control">
                            </div>
                        </div>      <!--学生信息-->
                        <div class="stu_form">
                            <span class="form_title">监护人</span>
                            <div>
                                <span>*</span>
                                <label>称呼:</label>
                                <select name="callName" id="callName1" class="form-control">
                                    <option value="1" selected>爸爸</option>
                                    <option value="2">妈妈</option>
                                    <option value="3">爷爷</option>
                                    <option value="4">奶奶</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="family_name">姓名:</label>
                                <input type="text" id="family_name" data-index="callName" class="form-control" maxlength="5">
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="family_tel">联系方式:</label>
                                <input type="text" id="family_tel" data-index="tel1" class="form-control" maxlength="11">
                            </div>
                            <div class="form-group">
                                <span>&nbsp; </span>
                                <label for="family_job">工作单位:</label>
                                <input type="text" id="family_job" data-index="address2" class="form-control" maxlength="25">
                            </div>
                        </div>      <!--监护人-->
                        <div class="stu_form">
                            <span class="form_title">紧急联系人</span>
                            <div>
                                <span>*</span>
                                <label>称呼:</label>
                                <select name="callName" id="callName2" class="form-control">
                                    <option value="1" >爸爸</option>
                                    <option value="2" selected>妈妈</option>
                                    <option value="3">爷爷</option>
                                    <option value="4">奶奶</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="family_name">姓名:</label>
                                <input type="text" id="family_name2" data-index="callName2" class="form-control" maxlength="5">
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="family_tel">联系方式:</label>
                                <input type="text" id="family_tel2" data-index="tel2" class="form-control" maxlength="11">
                            </div>
                            <div class="form-group">
                                <span>&nbsp; </span>
                                <label for="family_job">工作单位:</label>
                                <input type="text" id="family_job2" data-index="address3" class="form-control" maxlength="25">
                            </div>
                        </div>         <!--紧急联系人-->
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--修改学生信息弹框-->
    <div class="modal fade" id="myModal4" tabindex="-1">
        <div class="modal-dialog modal-lg" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span >&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel4">修改学生信息</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="stu_inform">
                        <div class="stu_form">
                            <div class="stu_picture" id="div2">
                                <img src="../images/wwq-img/student-photo.jpg" alt="">
                            </div>
                            <input type="file" id="input-load2">
                            <button class="btn" id="btn-load2" type="button">修改照片</button>
                        </div>      <!--上传照片-->
                        <div class="stu_form">
                            <div class="form-group">
                                <span>*</span>
                                <label for="name">姓名:</label>
                                <input type="text" id="name2"  class="form-control" maxlength="5" data-index="name">
                            </div>
                            <div>
                                <span>*</span>
                                <label>性别:</label>
                                <input type="radio" id="boy2" name="sex"><label for="boy2">男</label>
                                <input type="radio" id="girl2" name="sex"><label for="girl2">女</label>
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="birth2">出生年月:</label>
                                <input type="text" id="birth2" class="form-control" maxlength="15" data-index="birth">
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="class2">班级:</label>
                                <input type="text" id="class2" class="form-control" maxlength="10" data-index="class">
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="address2">家庭住址:</label>
                                <input type="text" id="address2" class="form-control" maxlength="25" data-index="address">
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="time2">入学时间:</label>
                                <input type="date" id="time2" class="form-control">
                            </div>
                        </div>      <!--学生信息-->
                        <div class="stu_form">
                            <span class="form_title">监护人</span>
                            <div>
                                <span>*</span>
                                <label>称呼:</label>
                                <select name="callName" id="callName3" class="form-control">
                                    <option value="1">爸爸</option>
                                    <option value="2">妈妈</option>
                                    <option value="3">爷爷</option>
                                    <option value="4">奶奶</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="family_name3">姓名:</label>
                                <input type="text" id="family_name3" class="form-control" maxlength="5" data-index="callName">
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="family_tel3">联系方式:</label>
                                <input type="tel" id="family_tel3" class="form-control" maxlength="11" data-index="tel1">
                            </div>
                            <div class="form-group">
                                <span>&nbsp; </span>
                                <label for="family_job3">工作单位:</label>
                                <input type="text" id="family_job3" class="form-control" maxlength="25" data-index="address2">
                            </div>
                        </div>      <!--监护人-->
                        <div class="stu_form">
                            <span class="form_title">紧急联系人</span>
                            <div>
                                <span>*</span>
                                <label>称呼:</label>
                                <select name="callName" id="callName4" class="form-control">
                                    <option value="1">爸爸</option>
                                    <option value="2">妈妈</option>
                                    <option value="3">爷爷</option>
                                    <option value="4">奶奶</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="family_name4">姓名:</label>
                                <input type="text" id="family_name4" class="form-control" maxlength="5" data-index="callName2">
                            </div>
                            <div class="form-group">
                                <span>*</span>
                                <label for="family_tel4">联系方式:</label>
                                <input type="tel" id="family_tel4" class="form-control" maxlength="11" data-index="tel2">
                            </div>
                            <div class="form-group">
                                <span>&nbsp; </span>
                                <label for="family_job4">工作单位:</label>
                                <input type="text" id="family_job4" class="form-control" maxlength="25" data-index="address3">
                            </div>
                        </div>         <!--紧急联系人-->
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-change">保存修改</button>
                </div>
            </div>
        </div>
    </div>
    <!--搜索、保存和修改成功弹框-->
    <div class="modal fade" id="myModal5" tabindex="-1">
        <div class="modal-dialog modal-sm" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span >&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel5">提示</h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger btn-del2" data-dismiss="modal">我知道了</button>
                </div>
            </div>
        </div>
    </div>


</body>
<script>

</script>
<script src="../js/Student_Information.js"></script>
</html>